{% extends 'index.html' %}

{% block head %}
<style type="text/css">
    .display_none{display: none;}
</style>

{% endblock %}

{% block bodyweigh %}
<body style="width: 1200px;">
{% endblock %}

{% block content %}

    <!-- 右侧主体开始 -->
        <div class="page-content" >
          <div class="content">
            <!-- 右侧内容框架，更改从这里开始 -->
            <!-- <form class="layui-form xbs" action="" >
                <div class="layui-form-pane" style="text-align: center;">
                  <div class="layui-form-item" style="display: inline-block;">
                    <label class="layui-form-label xbs768">日期范围</label>
                    <div class="layui-input-inline xbs768">
                      <input class="layui-input" placeholder="开始日" id="LAY_demorange_s">
                    </div>
                    <div class="layui-input-inline xbs768">
                      <input class="layui-input" placeholder="截止日" id="LAY_demorange_e">
                    </div>
                    <div class="layui-input-inline">
                      <input type="text" name="username"  placeholder="请输入用户名" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-input-inline" style="width:80px">
                        <button class="layui-btn"  lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
                    </div>
                  </div>
                </div> 
            </form> -->
            
            <table class="layui-table">
                <thead>
                    <tr>
                        <th>
                            banner类型
                        </th>
                        <th>
                            子类型
                        </th>
                        <th>
                            banner图片
                        </th>                             
                        <th>
                            操作
                        </th>
                    </tr>
                </thead>
                <tbody id="banners">
                   <tr>
                        <td>
                            <select class="addselect" style="color: #000;"><option style="color: #000;" value ="1">游戏</option><option  style="color: #000;" value="2">赛事</option><option style="color: #000;" value ="3">新闻</option></select><input type="hidden" class="add_type_id" value="1"/>
                        </td>
                        <td>
                            <select class="addselect_datail" style="color: #000;"></select><input type="hidden" class="add_type_detail" value="1"/>
                        </td>
                        <td>                   
                            <input type="file" class="addimage" accept="image/*"/><input type="hidden" class="addimgurl" value=""/>
                        </td>                                     
                        <td class="td-manage">
                            <button type="button" style="color: #000;" class="addition">添加</button>                          
                        </td>
                    </tr>
                </tbody>
            </table>
            <!-- 右侧内容框架，更改从这里结束 -->
          </div>
        </div>
        <!-- 右侧主体结束 -->
{% endblock %}

{% block script %}
 <!-- 页面动态效果 -->
    <script>

        layui.use(['laydate'], function(){
          laydate = layui.laydate;//日期插件

          //以上模块根据需要引入
          //
          

          
          var start = {
            min: laydate.now()
            ,max: '2099-06-16 23:59:59'
            ,istoday: false
            ,choose: function(datas){
              end.min = datas; //开始日选好后，重置结束日的最小日期
              end.start = datas //将结束日的初始值设定为开始日
            }
          };
          
          var end = {
            min: laydate.now()
            ,max: '2099-06-16 23:59:59'
            ,istoday: false
            ,choose: function(datas){
              start.max = datas; //结束日选好后，重置开始日的最大日期
            }
          };
          
          document.getElementById('LAY_demorange_s').onclick = function(){
            start.elem = this;
            laydate(start);
          }
          document.getElementById('LAY_demorange_e').onclick = function(){
            end.elem = this
            laydate(end);
          }
          
        });

        //批量删除提交
         function delAll () {
            layer.confirm('确认要删除吗？',function(index){
                //捉到所有被选中的，发异步进行删除
                layer.msg('删除成功', {icon: 1});
            });
         }
         /*用户-添加*/
        function member_add(title,url,w,h){
            x_admin_show(title,url,w,h);
        }
        /*用户-查看*/
        function member_show(title,url,id,w,h){
            x_admin_show(title,url,w,h);
        }



        // 用户-编辑
        function member_edit (title,url,id,w,h) {
            x_admin_show(title,url,w,h); 
        }

        /*用户-删除*/
        function member_del(obj,id){
            layer.confirm('确认要删除吗？',function(index){
                //发异步删除数据
                $(obj).parents("tr").remove();
                layer.msg('已删除!',{icon:1,time:1000});
            });
        }
        </script>

        <script>
            
            $.ajax({
                url:"/app/load/banner_type_detail?id=1",
                dataType:"json",
                success:function(res){
                    if(res.status == 0){
                        $(".addselect_datail").empty();                                
                        $.each(res.data,function(i,item){
                            $(".addselect_datail").append('<option style="color: #000;" value ="'+item.id+'">'+item.title+'</option>');
                            
                        });

                    }else {
                        alert(res.msg);
                    }
                }
            });

            $(".addimage").change(function(){
                var imageurl = $(this).next();
                var file = this.files[0];
                if (window.FileReader) {
                        var reader = new FileReader();
                        reader.readAsDataURL(file);
                        //监听文件读取结束后事件
                      reader.onloadend = function (e) {
                        imageurl.val(e.target.result);    //e.target.result就是最后的路径地址
                          imageurl.next().val(1);
                        };
                   }
            });

            $(".addselect").on("click",function(){
                var add_type_id = $(".addselect option:selected").val();
                $(this).next().val(add_type_id);

                $.ajax({
                    url:"/app/load/banner_type_detail?id="+add_type_id,
                    dataType:"json",
                    success:function(res){
                        if(res.status == 0){
                          
                            $(".addselect_datail").empty();
                            console.log(res.data);
                            $.each(res.data,function(i,item){
                                        $(".addselect_datail").append('<option style="color: #000;" value ="'+item.id+'">'+item.title+'</option>');
                                    });
            
                        }else {
                            alert(res.msg);
                        }
                    }
                })

            });
            
            $(".addselect_datail").on("click",function(){
                var add_type_detail = $(".addselect_datail option:selected").val();
                $(this).next().val(add_type_detail);
            });


            $(".addition").on("click",function(){
    
                var icon = $(".addimgurl").val();
                var type = $(".add_type_id").val();             
                var type_detail = $(".add_type_detail").val();          
                var type_detail_name = $(".addselect_datail option:selected").html();       
                
                if (icon == ""){
                    alert('请添加赛事图片');
                    return false;
                }
                
                params = {
                    "icon":icon,
                    "type":type,
                    "type_detail":type_detail,
                    "type_detail_name":type_detail_name,
                };
                
                $.ajax({
                    url:"/app/banners/add",
                    type:"POST",
                    data:JSON.stringify(params),
                    contentType:'application/json',
                    success:function(res){
                        if(res.status == 0){
                            location.href="/app/show/banners";
                        }else {
                            alert(res.msg);
                        }
                    }
                })
                
            }); 

        </script>

{% endblock %}